<template>
  <span class="el-icon-caret-left goBack-icon-box"
        :style="{top: top + `px`, left: left + `px`}" @click="back"/>
</template>

<script>

export default {
  name: 'back-button',
  props: ['top', 'left'],
  data() {
    return {}
  },
  methods: {
    back() {
      this.$router.back()
    }
  }
}
</script>

<style scoped lang="scss">
.goBack-icon-box {
  position: absolute;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: xx-large;
  opacity: 0.2;
  color: var(--theme-color);
  transition: all 0.3s ease;
}

.goBack-icon-box:hover {
  opacity: 0.8;
  cursor: pointer;
}

.back-position {
  top: 25px;
  left: calc(8% - 10px);
}
</style>